<template>
  <!-- Vue3组件不在需要根标签 -->
  <p>App</p>
  <p v-memo="[count]">{{ count }}</p>
  <p v-once>{{ count }}</p>
  <p v-pre>{{ count }}</p>
  <button @click="count++">按钮</button>
</template>

<script lang="ts">
/*
  Vue 指令语法：

    1. 重要指令
      - v-bind
        - 作用：单向数据绑定，动态绑定数据（给标签属性绑定一个动态的值）
        - 语法：v-bind:属性名="属性值" 
        - 简写：:属性名="属性值" 
        - 修饰符：
          - .sync （只有Vue2有，Vue3删除了）

      - v-model
        - 作用：双向数据绑定（收集表单数据）
        - 语法：v-model="JS表达式"
        - 修饰符：
          - .lazy 将绑定input事件改成了change事件（失去焦点触发）
          - .trim
          - .number

        - 原理（双向数据绑定原理）：
          - 如果是DOM元素
            - 如果是普通输入框或文本域，绑定value属性和input事件
            - 如果是单选框或多选框，绑定checked属性和change事件
            - 如果是下拉列表，绑定value属性和change事件
          - 如果是组件
            - Vue2中绑定 value 属性和 input 事件
            - Vue3中绑定 modelValue 属性和 update:modelValue 事件

      - v-on
        - 作用：绑定事件
        - 语法：v-on:事件名称="事件回调函数"
        - 简写：@事件名称="事件回调函数"
        - 修饰符：
          - .native 绑定原生DOM事件（只有Vue2有，Vue3删除了）
          - .once
          - .prevent 阻止事件默认行为

      - v-for
        - 作用：列表渲染
        - 语法：v-for="(item, index) in xxx" :key="item.id"
        
        - key有什么用？
          - 在diff算法中尽可能复用相同key的元素
        - key尽量用id，用index在往数组前面添加/删除时性能不好

      - v-if / v-else-if / v-else
        - 作用：条件渲染（让元素显示隐藏）
        - 语法：v-if="JS表达式"

      - v-show
        - 作用：条件渲染（让元素显示隐藏）
        - 语法：v-show="JS表达式"

      v-if和v-show区别：
        - 隐藏时对元素操作不一样
          - v-if 直接删除（卸载）元素
          - v-show 通过样式 display: none 来隐藏元素
        - 频繁切换 v-show 更好，不频繁切换 v-if 更好

      - v-for和v-if一起使用：
        - Vue2中v-for优先级高
          - 解决：使用计算属性，对数据先进行过滤处理，在遍历展示
        - Vue3中v-if优先级高

      - v-slot
        - 作用：插槽，给子组件传递标签数据
        - 分类：
          - 默认插槽
          - 具名插槽
          - 作用域插槽

      - v-memo
        - 作用：用来缓存部分DOM元素
        - 语法：v-memo="[依赖项]"

    2. 次要指令（了解）

      - v-once
        - 只解析渲染一次，后面不会更新了

      - v-pre
        - 跳过解析，只渲染原始内容

      - v-text
        - 设置元素textContent内容（相当于innerText）

      - v-html
        - 设置元素innerHTML内容

      - v-cloak
        - 用于隐藏尚未完成编译的 DOM 模板
        
        配合样式一起使用：
        [v-cloak]{
          display: none;
        }
    
*/
export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
};
</script>

<style scoped>
.title {
  color: yellowgreen;
}
</style>
